{% extends 'base.html' %}
{% load static %}

{% block title %}
    登录
{% endblock %}

{% block head %}
    <script type="text/javascript" src="{% static 'js/md5-min.js' %}"></script>
{% endblock %}

{% block body %}
    <div class="login-body">
        <div class="login-card">
            <div class="login-top">
                <h3>新用户登录</h3>
                <h5>{{ text|default:'尊敬的用户，欢迎您回来！' }}</h5>
            </div>
            <div class="login-bottom">
                <form method="post" action="{% url 'users:login' %}" onsubmit="return login()">
                    <input type="hidden" name="time" id="time">
                    <div class="login-input-box">
                        {% csrf_token %}
                        <input type="text" id="account" name="account" value="" class="login-admin active"
                               placeholder="邮箱登录">
                        <span style="color:red;" id="aSpan"></span>
                        <input type="password" id="password" name="password" value="" class="login-password">
                        <span style="color:red;" id="pSpan"></span><br>
                        <input type="text" style="height:36px;width: 100px;" id="code" onblur="checkCode(this.value)">
                        <img src="{% url 'users:verification_code' %}" onclick="changeCode(this)">
                        <span style="color:red;" id="cSpan"></span>
                        <input type="hidden" name="redirect" value="{{ path }}">
                        <button class="login-btn" style="color: white;text-decoration: none;cursor: pointer">登录</button>
                    </div>
                </form>
                <div class="login-img">
                    <img src="{% static 'images/login_05.png' %}" alt="">
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block body_end %}
    <script>
        //切换验证码
        function changeCode(imgObj) {
            imgObj.src = '{% url 'users:verification_code' %}?time=' + new Date().getTime();
        }

        function isEmail(str) {
            var reg = /^[a-zA-Z0-9_-]{6,}@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
            return reg.test(str);
        }

        function login() {
            //获取输入框的值
            var account = $('#account').val();
            var password = $('#password').val();
            //简单校验
            if (account.length < 6 || !isEmail(account)) {
                $('#aSpan').text('邮箱格式不符合');
                return false;
            }
            else {
                $('#aSpan').text('');
            }
            if (password.length < 6) {
                $('#pSpan').text('密码长度不能小于六位');
                return false;
            }
            else {
                $('#pSpan').text('');
            }
            var code = $('#code').val();
            if (code) {  // 不为空验证
                var cflag = checkCode(code);
                if (cflag) {
                    $('#cSpan').text('×');
                    return false;
                }
                var hex_pwd = hex_md5(password);
                $('#password').val(hex_pwd);
                return true;
            }
            else { // 空直接执行
                $('#cSpan').text('×');
                return false;
            }
        }

        function checkCode(txt) {
            if (txt) {
                var cflag = false;
                $.ajax({
                    url: '{% url 'users:checkCode' %}',
                    type: 'get',
                    data: {'code': txt},
                    success: function (result) {
                        if (result) {
                            cflag = true;
                            $('#cSpan').text('√');
                        } else {
                            $('#cSpan').text('×');
                        }
                    }
                });
            }
            else {
                $('#cSpan').text('请输入验证码');
            }
            return cflag;
        }
    </script>
{% endblock %}